<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" class="modal fade" tabindex="-1" role="dialog"
    aria-labelledby="createOrEditModal" aria-hidden="true" [config]="{ backdrop: 'static', keyboard: !saving }">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form *ngIf="active" #userForm="ngForm" novalidate autocomplete="off">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span>一般过程外包申请变更通知单</span>
                    </h4>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')" [disabled]="saving">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="height: 500px; overflow: auto;">
                    <p-tabView [activeIndex]="index" (onChange)="handleChange($event)">
                        <p-tabPanel header="申请单">
                            <div style="border: 1px solid #c7cdd9;margin-bottom: 10px;border-top-left-radius:4px;border-top-right-radius: 4px;">
                                <div class="col-xl-12" style="padding-right: 0px; padding-left: 0px;">
                                    <div class="form-group m-form__group">
                                        <div class="input-group">
                                            <input [(ngModel)]="filterText" name="filterText" autoFocus class="form-control m-input"
                                                style="border-right: none;" [placeholder]="l('SearchWithThreeDot')"
                                                type="text">
                                            <span class="input-group-btn">
                                                <button (click)="getTasks()" class="btn btn-primary"><i class="flaticon-search-1"
                                                        [attr.aria-label]="l('Search')"></i></button>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="row" style="overflow: auto;">
                                    <div class="align-items-center">
                                        <!--<Primeng-TurboTable-Start>-->
                                        <div class="primeng-datatable-container">
                                            <p-table #dataTable [value]="primengTableHelper.records" rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
                                                [paginator]="false" [lazy]="true" [scrollable]="true" ScrollWidth="100%"
                                                [responsive]="primengTableHelper.isResponsive" [resizableColumns]="primengTableHelper.resizableColumns">
                                                <ng-template pTemplate="header">
                                                    <tr>
                                                        <th style="width: 50px">
                                                            操作</th>
                                                        <th style="width: 150px" pSortableColumn="code">
                                                            申请单
                                                        </th>
                                                        <th style="width: 150px" pSortableColumn="displayName">
                                                            申请单位
                                                        </th>
                                                        <th style="width: 150px" pSortableColumn="picNo">
                                                            供方单位
                                                        </th>
                                                        <th style="width: 250px" pSortableColumn="portion">
                                                            申请单类型
                                                        </th>
                                                        <th style="width: 200px" pSortableColumn="amount">
                                                            创建人
                                                        </th>
                                                    </tr>
                                                </ng-template>
                                                <ng-template pTemplate="body" let-record="$implicit">
                                                    <tr>
                                                        <td style="width: 50px">
                                                            <button pButton type="button" icon="pi pi-plus" class="ui-button-info"
                                                                style="margin-right: .5em" (click)="SelectTask(record)"></button>
                                                        </td>
                                                        <td style="width: 150px">
                                                            {{record.code}}
                                                            <div [ngSwitch]="record.applyStatus">
                                                                <div *ngSwitchCase="">
                                                                    <div class="m-loader m-loader--warning" style="width: 30px; display: inline-block;">
                                                                    </div>
                                                                </div>
                                                                <div *ngSwitchDefault>
                                                                    <span *ngIf="record.applyStatus==0" class="label m-badge m-badge--primary m-badge--wide"
                                                                        data-toggle="tooltip" title="运行" data-placement="top">
                                                                        运行
                                                                    </span>
                                                                    <span *ngIf="record.applyStatus==1" class="label m-badge m-badge--warning m-badge--wide"
                                                                        data-toggle="tooltip" title="已暂停"
                                                                        data-placement="top">
                                                                        已暂停
                                                                    </span>
                                                                    <span *ngIf="record.applyStatus==2" class="label m-badge m-badge--success m-badge--wide"
                                                                        data-toggle="tooltip" title="完成" data-placement="top">
                                                                        完成
                                                                    </span>
                                                                    <span *ngIf="record.applyStatus==3" class="label m-badge m-badge--danger m-badge--wide"
                                                                        data-toggle="tooltip" title="已终止"
                                                                        data-placement="top">
                                                                        已终止
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td style="width: 150px">
                                                            {{record.applyUnit}}
                                                        </td>
                                                        <td style="width: 150px">
                                                            {{record.supplierUnit}}
                                                        </td>
                                                        <td style="width: 250px">
                                                            <div [ngSwitch]="record.outsourcingType">
                                                                <div *ngSwitchCase="">
                                                                    <div class="m-loader m-loader--warning" style="width: 30px; display: inline-block;">
                                                                    </div>
                                                                </div>
                                                                <div *ngSwitchDefault>
                                                                    <span *ngIf="record.outsourcingType==0" class="label m-badge m-badge--primary m-badge--wide"
                                                                        data-toggle="tooltip" title="运行" data-placement="top">
                                                                        一般过程外协申请
                                                                    </span>
                                                                    <span *ngIf="record.outsourcingType==1" class="label m-badge m-badge--warning m-badge--wide"
                                                                        data-toggle="tooltip" title="已暂停"
                                                                        data-placement="top">
                                                                        关键过程外协申请
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td style="width: 200px">
                                                            {{record.createdUser}}
                                                        </td>

                                                    </tr>
                                                </ng-template>
                                            </p-table>
                                            <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                                                {{'NoData' | localize}}
                                            </div>
                                            <div class="primeng-paging-container">
                                                <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage"
                                                    #paginator (onPageChange)="getTasks($event)" [totalRecords]="primengTableHelper.totalRecordsCount">
                                                </p-paginator>
                                                <span class="total-records-count">
                                                    {{'TotalRecordsCount' |
                                                    localize:primengTableHelper.totalRecordsCount}}
                                                </span>
                                            </div>
                                        </div>

                                        <!--<Primeng-TurboTable-End>-->
                                    </div>
                                </div>
                            </div>
                        </p-tabPanel>
                        <p-tabPanel header="变更单">
                            <div class="align-items-center">
                                <div class="align-items-center" style="border: 1px solid #c7cdd9;padding: 0.571em 1em; ">
                                    <div class="row">
                                        <div class="form-group col-md-2">
                                            <label for="supplierUnit">合格供方单位 *</label>
                                        </div>
                                        <div class="form-group col-md-10">
                                            <p-dropdown [options]="SupplierAyy" name="supplierUnit" #supplierUnitInput="ngModel"
                                                [(ngModel)]="_applyChangeMainDto.supplierUnit" (onChange)="supplierChange($event)"
                                                [panelStyle]="{minWidth:'12em'}"></p-dropdown>

                                            <!-- <input id="supplierUnit" #supplierUnitInput="ngModel" type="text"  class="form-control" [(ngModel)]="_processingOrder.supplierUnit" required maxlength="256" /> -->
                                            <validation-messages [formCtrl]="supplierUnitInput">
                                            </validation-messages>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-md-2">
                                            <label for="code">申请单编号</label>
                                        </div>
                                        <div class="form-group col-md-10">
                                            <input id="code" #codeInput="ngModel" type="text" name="code" class="form-control"
                                                [(ngModel)]="_applyChangeMainDto.code" required maxlength="256"
                                                disabled />
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-md-2">
                                            <label for="applyUnit">申请单位</label>
                                        </div>
                                        <div class="form-group col-md-10">
                                            <input id="applyUnit" #applyUnitInput="ngModel" type="text" name="applyUnit"
                                                class="form-control" [(ngModel)]="_applyChangeMainDto.applyUnit"
                                                required maxlength="256" disabled />
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-md-2">
                                            <label for="changedCode">变更单编号</label>
                                        </div>
                                        <div class="form-group col-md-10">
                                            <input id="changedCode" #changedCodeInput="ngModel" type="text" name="changedCode"
                                                class="form-control" [(ngModel)]="_applyChangeMainDto.changedCode"
                                                required maxlength="256" disabled />
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div style="border: 1px solid #c7cdd9;margin-bottom: 10px;border-top-left-radius:4px;border-top-right-radius: 4px;margin-top: 20px;">
                                <div class="row" style="overflow: auto;">
                                    <div class="align-items-center">
                                        <!--<Primeng-TurboTable-Start>-->
                                        <div class="primeng-datatable-container">
                                            <p-table #teskdataTable [value]="detailsprimengTableHelper.records" rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
                                                editMode='row' dataKey="taskForModelId" [paginator]="false" [lazy]="true"
                                                [scrollable]="true" ScrollWidth="100%">
                                                <ng-template pTemplate="header">
                                                    <tr>
                                                        <th style="width: 100px">
                                                            操作</th>
                                                        <th style="width: 150px">
                                                            任务号
                                                        </th>
                                                        <th style="width: 150px">
                                                            产品图号
                                                        </th>
                                                        <th style="width: 150px">
                                                            产品名称
                                                        </th>
                                                        <th style="width: 100px">
                                                            申请单数量/<br>已交付数量
                                                        </th>
                                                        <th style="width: 130px">
                                                            加工状态
                                                        </th>
                                                        <th style="width: 130px">
                                                            交付进度
                                                        </th>
                                                        <th style="width: 230px">
                                                            变更原因
                                                        </th>
                                                        <th style="width: 300px">
                                                            当前外包产品进度
                                                        </th>
                                                        <th style="width: 120px">
                                                            变更后数量
                                                        </th>
                                                    </tr>
                                                </ng-template>
                                                <ng-template pTemplate="body" let-record let-editing="editing" let-ri='rowIndex'>
                                                    <tr [pEditableRow]='record'>
                                                        <td style="width: 100px">
                                                            <button *ngIf="!editing" pButton type="button"
                                                                pInitEditableRow icon="pi pi-pencil" [disabled]='record.deliveryAmount >= record.outsourcingAmount'
                                                                class="ui-button-info" (click)="onRowEditInit(record)"></button>
                                                            <button *ngIf="editing" pButton type="button"
                                                                pSaveEditableRow icon="pi pi-check" class="ui-button-success"
                                                                style="margin-right: .5em" (click)="onRowEditSave(record)"></button>
                                                            <button *ngIf="editing" pButton type="button"
                                                                pCancelEditableRow icon="pi pi-times" class="ui-button-danger"
                                                                (click)="onRowEditCancel(record, ri)"></button>
                                                        </td>
                                                        <td style="width: 150px">
                                                            {{record.taskCode}}
                                                        </td>
                                                        <td style="width: 150px">
                                                            {{record.picNo}}
                                                        </td>
                                                        <td style="width: 150px">
                                                            {{record.taskName}}
                                                        </td>
                                                        <td style="width: 100px">
                                                            <h5>{{record.outsourcingAmount}}/{{record.deliveryAmount}}</h5>
                                                        </td>
                                                        <td style="width: 130px">
                                                            {{record.workStatus}}
                                                        </td>
                                                        <td style="width: 130px">
                                                            {{record.deliveryRate | momentFormat:'L'}}
                                                        </td>
                                                        <td style="width: 230px">
                                                            <p-cellEditor>
                                                                <ng-template pTemplate="input">
                                                                    <input pInputText type="text" style='width:100%;'
                                                                        name='changeRemark' [(ngModel)]="record.changeRemark"
                                                                        required>
                                                                </ng-template>
                                                                <ng-template pTemplate="output">
                                                                    {{record.changeRemark}}
                                                                </ng-template>
                                                            </p-cellEditor>
                                                        </td>
                                                        <td style="width: 300px">
                                                            <p-cellEditor>
                                                                <ng-template pTemplate="input">
                                                                    <input pInputText type="text" style='width:100%;'
                                                                        name='currentOutsourcingProgress' [(ngModel)]="record.currentOutsourcingProgress"
                                                                        required>
                                                                </ng-template>
                                                                <ng-template pTemplate="output">
                                                                    {{record.currentOutsourcingProgress}}
                                                                </ng-template>
                                                            </p-cellEditor>
                                                        </td>
                                                        <td style="width: 120px">
                                                            <p-cellEditor>
                                                                <ng-template pTemplate="input">
                                                                    <p-spinner size="6" name="changedAmount"
                                                                        #changedAmountInput="ngModel" [min]="0"  [max]="record.outsourcingAmount" [(ngModel)]="record.changedAmount"
                                                                        required></p-spinner>
                                                                    <validation-messages [formCtrl]="changedAmountInput"></validation-messages>
                                                                </ng-template>
                                                                <ng-template pTemplate="output">
                                                                    {{record.changedAmount}}
                                                                </ng-template>
                                                            </p-cellEditor>
                                                        </td>
                                                    </tr>
                                                </ng-template>
                                            </p-table>
                                            <div class="primeng-no-data" *ngIf="detailsprimengTableHelper.totalRecordsCount == 0">
                                                {{'NoData' | localize}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </p-tabPanel>
                        <p-tabPanel header="审批人">
                            <div style="border: 1px solid #c7cdd9;padding: 0.571em 1em; ">
                                <div class="row">
                                    <div class="form-group col-md-4">
                                        <label for="Code">申请单位主管领导 </label>
                                    </div>
                                    <div class="form-group col-md-8">
                                        <span>{{selectedCar3}}</span>
                                        <p-dropdown [options]="users" name='workShopLeader' [(ngModel)]="stepusers.workShopLeader"
                                            [filter]='true'>

                                        </p-dropdown>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="form-group col-md-4">
                                        <label for="Code">计划生产处型号主管 </label>
                                    </div>
                                    <div class="form-group col-md-8">
                                        <span>{{selectedCar3}}</span>
                                        <p-dropdown [options]="users" name='plannedProductionModelManager' [(ngModel)]="stepusers.plannedProductionModelManager"
                                            [filter]='true'>

                                        </p-dropdown>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-md-4">
                                        <label for="Code">计划生产处主管处长 </label>
                                    </div>
                                    <div class="form-group col-md-8">
                                        <span>{{selectedCar3}}</span>
                                        <p-dropdown [options]="users" name='plannedProductionDirector' [(ngModel)]="stepusers.plannedProductionDirector"
                                            [filter]='true'>

                                        </p-dropdown>
                                    </div>
                                </div>
                            </div>
                        </p-tabPanel>
                    </p-tabView>
                </div>
                <div class="modal-footer">
                    <button [disabled]="saving" type="button" class="btn btn-default" (click)="close()">
                        取消
                    </button>
                    <button type="submit" (click)="save()" class="btn btn-primary2" [disabled]="!userForm.form.valid"
                        [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')">
                        <i class="fa fa-save"></i> <span>申请</span>
                    </button>
                </div>
            </form>
        </div>
    </div>




</div>
